﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Matrix Free Bootstrap Admin Template</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <script src="d3.min.js"></script>
    <script src="d3-v6-tip.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="d3.layout.cloud.js"></script>
    <link rel="stylesheet" href="d3-tip.css">
</head>

<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">高管宝典</a>
            </div>  
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a class="active-menu" href="index.html"><i class="fa fa-dashboard"></i> 概览</a>
                    </li>
                    <li>
                        <a href="race.html?feature=institute"><i class="fa fa-desktop"></i> 时间追逐柱状图 </a>
                    </li>
					<li>
                        <a href="statistics.html?feature=age,salary"><i class="fa fa-bar-chart-o"></i> 多因素统计 </a>
                    </li>
                    <li>
                        <a href="personal.html?name=张锡康"><i class="fa fa-search"></i> 个人搜索 </a>
                    </li>
                    <li>
                        <a href="map.html"><i class="fa fa-arrows"></i> 关系映射图 </a>
                    </li>

                </ul>

            </div>

        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper">
            <div id="page-inner">


                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            A股上市公司高管信息可视化系统 <small>   做你的高管宝典</small>
                        </h1>
                    </div>
                </div>
				
				
                <!-- /. ROW  -->

                <div class="row">
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-green">
                            <div class="panel-left pull-left green">
                                <i class="fa fa-users fa-5x"></i>
                                
                            </div>
                            <div class="panel-right pull-right">
								<h3>28.3万</h3>
                               <strong> 位高管</strong>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-blue">
                              <div class="panel-left pull-left blue">
                                <i class="fa fa-book fa-5x"></i>
								</div>
                                
                            <div class="panel-right pull-right">
							<h3>101万 </h3>
                               <strong> 总记录数</strong>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-red">
                            <div class="panel-left pull-left red">
                                <i class="fa fa fa-building-o fa-5x"></i>
                               
                            </div>
                            <div class="panel-right pull-right">
							 <h3>4741 </h3>
                               <strong> 家上市公司 </strong>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-brown">
                            <div class="panel-left pull-left brown">
                                <i class="fa fa-globe fa-5x"></i>
                                
                            </div>
                            <div class="panel-right pull-right">
							<h3>51 </h3>
                             <strong>国籍</strong>

                            </div>
                        </div>
                    </div>
                </div>
				
				<!-- <div class="row">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							Area Chart
						</div>
						<div class="panel-body">
							<div id="morris-area-chart"></div>
						</div>
					</div>  
					</div>		
				</div> 	
				
                <div class="row">
                    <div class="col-md-9 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                Bar Chart Example
                            </div>
                            <div class="panel-body">
                                <div id="morris-bar-chart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                Donut Chart Example
                            </div>
                            <div class="panel-body">
                                <div id="morris-donut-chart"></div>
                            </div>
                        </div>
                    </div>

                </div> -->
                <!-- /. ROW  -->

	   
		
		<!-- <div class="row">
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Customers</h4>
						<div class="easypiechart" id="easypiechart-blue" data-percent="82" ><span class="percent">82%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Sales</h4>
						<div class="easypiechart" id="easypiechart-orange" data-percent="55" ><span class="percent">55%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>Profits</h4>
						<div class="easypiechart" id="easypiechart-teal" data-percent="84" ><span class="percent">84%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>No. of Visits</h4>
						<div class="easypiechart" id="easypiechart-red" data-percent="46" ><span class="percent">46%</span>
						</div>
					</div>
				</div>
			</div>
		</div> -->
        <!--/.row-->
			
				
				
				
				
                <!-- <div class="row">
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                Tasks Panel
                            </div>
                            <div class="panel-body">
                                <div class="list-group">

                                    <a href="#" class="list-group-item">
                                        <span class="badge">7 minutes ago</span>
                                        <i class="fa fa-fw fa-comment"></i> Commented on a post
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <span class="badge">16 minutes ago</span>
                                        <i class="fa fa-fw fa-truck"></i> Order 392 shipped
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <span class="badge">36 minutes ago</span>
                                        <i class="fa fa-fw fa-globe"></i> Invoice 653 has paid
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <span class="badge">1 hour ago</span>
                                        <i class="fa fa-fw fa-user"></i> A new user has been added
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <span class="badge">1.23 hour ago</span>
                                        <i class="fa fa-fw fa-user"></i> A new user has added
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <span class="badge">yesterday</span>
                                        <i class="fa fa-fw fa-globe"></i> Saved the world
                                    </a>
                                </div>
                                <div class="text-right">
                                    <a href="#">More Tasks <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-8 col-sm-12 col-xs-12">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                Responsive Table Example
                            </div> 
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>S No.</th>
                                                <th>First Name</th>
                                                <th>Last Name</th>
                                                <th>User Name</th>
                                                <th>Email ID.</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>John</td>
                                                <td>Doe</td>
                                                <td>John15482</td>
                                                <td>name@site.com</td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>Kimsila</td>
                                                <td>Marriye</td>
                                                <td>Kim1425</td>
                                                <td>name@site.com</td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>Rossye</td>
                                                <td>Nermal</td>
                                                <td>Rossy1245</td>
                                                <td>name@site.com</td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>Richard</td>
                                                <td>Orieal</td>
                                                <td>Rich5685</td>
                                                <td>name@site.com</td>
                                            </tr>
                                            <tr>
                                                <td>5</td>
                                                <td>Jacob</td>
                                                <td>Hielsar</td>
                                                <td>Jac4587</td>
                                                <td>name@site.com</td>
                                            </tr>
                                            <tr>
                                                <td>6</td>
                                                <td>Wrapel</td>
                                                <td>Dere</td>
                                                <td>Wrap4585</td>
                                                <td>name@site.com</td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div> -->

                <div class="row">
                    <div class="col-md-8 col-sm-12 col-xs-12">
                    <div id="aaaa">
                        <svg width="900" height="700" id="mainsvg" class="svgs"></svg>
                    </div>
                    <script>
                        var svg = d3.select("svg"),
                          width = +svg.attr("width"),
                          height = +svg.attr("height");
                  
                        // Map and projection
                        var path = d3.geoPath();
                        var projection = d3.geoMercator()
                          .scale(800)
                          .center([105, 36])
                          .translate([width / 2, height / 2]);
                  
                        // Data and color scale
                        //var data_people = new Map();
                        //var data_company = new Map();
                        var colorScale = d3.scaleThreshold()
                          .domain([50, 1000, 2000, 3500, 5000, 10000, 15000])
                          .range(d3.schemeBlues[7]);
                        
                        const tooltip = d3.selectAll("#aaaa")
                          .append("div")
                          .style("text-align", "center")
                          .style("opacity", 0.7)
                          .attr("class", "tooltip")
                          .style("background-color", "white")
                          .style("position", "absolute")
                          //.style("width", "50px")
                          //.style("height", "50px")
                          .style("border", "solid")
                          .style("border-color", "#4682B4")
                          .style("border-width", "2px")
                          .style("border-radius", "5px")
                          .style("padding", "5px")

                        var tooltipParentElement = tooltip.node().parentNode; // 获取父组件元素

                        // Load external data and boot
                        Promise.all([
                          d3.json("china.json"),
                          d3.json("sample-data/map_data_counts.json")
                        ]).then(ready);
                  
                        tip_text = function(event, d) {
                          console.log("hihihih");
                          console.log(d.properties.name);
                          return d.properties.name;
                        }
                        // create a tooltip
                  
                  
                        function ready([topo, countData]) {
                          console.log("countData")
                          //countData.forEach(function(d) { data_people.set(d.code, +d.pop); });
                  
                          let mouseOver = function(event, d) {
                            var tooltipParentRect = tooltipParentElement.getBoundingClientRect(); // 获取父组件在屏幕中的位置信息
                            d3.selectAll(".Country")
                              .style("opacity", .5);
                            d3.select(this)
                              .style("opacity", 1)
                              .style("stroke", "black");
                            tooltip.style("opacity", .7)
                                .style("left", (event.x+10)-tooltipParentRect.left + "px")
                                .style("top", (event.y+10)-tooltipParentRect.top + "px");
                          }
                  
                          let mousemove = function(event,d) {
                            var tooltipParentRect = tooltipParentElement.getBoundingClientRect(); // 获取父组件在屏幕中的位置信息
                            tooltip
                            .html('<span>' + d.properties.fullname + '</span>' + ": <br> <span style='color: #4B0082'> 高管共计 " + countData[d.properties.name]["people"] + "人 </span> <br> <span style='color: #191970'> 上市公司 " + countData[d.properties.name]["company"] + " 家 </span>")
                            .style("left", (event.x+10)-tooltipParentRect.left + "px")
                            .style("top", (event.y+10)-tooltipParentRect.top + "px")
                            //style("left", (100) + "px")
                            //.style("top", (100) + "px")
                          }
                  
                          let mouseLeave = function(event, d) {
                            d3.select(this)
                              .style("stroke", "transparent");
                            d3.selectAll(".Country")
                              .style("opacity", .8);
                            tooltip.style("opacity", 0);
                          }
                  
                          // Draw the map
                          svg.append("g")
                            .selectAll("path")
                            .data(topo.features)
                            .join("path") // use join instead of enter().append() in d3.v6
                            // draw each country
                            .attr("d", d3.geoPath().projection(projection))
                            // set the color of each country
                            .attr("fill", function(d) {
                              console.log(d.properties.name)
                              console.log(countData[d.properties.name]["people"])
                              d.total = countData[d.properties.name]["people"] || 10;
                              return colorScale(d.total);
                            })
                            .style("stroke", "transparent")
                            .attr("class", "Country") // set class without function in d3.v6
                            .style("opacity", .8)
                            .on("mouseover", mouseOver)
                            .on("mousemove", mousemove)
                            .on("mouseleave", mouseLeave);
                        }
                    </script>
                </div>

                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                高管人数大于5000的省份
                            </div>
                            <div class="panel-body">
                                <div class="list-group">
                                    <a href="#" class="list-group-item">
                                        <span class="badge">Top 1</span>
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 广东：24,237&nbsp 人
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-comment"></i> &nbsp 北京：19,438&nbsp 人
                                    </a>

                                    <a href="#" class="list-group-item">
                                        <span class="badge">Top 3</span>
                                        <i class="fa fa-fw fa-user"></i> &nbsp 上海：18,705&nbsp 人
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 浙江：17,414&nbsp 人
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <span class="badge">Top 5</span>
                                        <i class="fa fa-fw fa-user"></i> &nbsp 江苏：16,906&nbsp 人
                                    </a>

                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-truck"></i> &nbsp 山东：10,408&nbsp 人
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 湖北：7,272&nbsp 人
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 福建：6,346&nbsp 人
                                    </a>

                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 四川：6,940&nbsp 人
                                    </a>
                                    
                                    <a href="#" class="list-group-item">
                                        <span class="badge">Top 10</span>
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 安徽：5,861&nbsp 人
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 湖南：5,685&nbsp 人
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-fw fa-globe"></i> &nbsp 辽宁：5,394&nbsp 人
                                    </a>
                                    

   
                                </div>
                                <div class="text-right">
                                    <a href="#">高管宝典 <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>

                    </div>
                    
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                教育经历-学校
                            </div>
                            <div class="panel-body">
                                <svg width="350" height="350" id="word_cloud_education_univ" class="svgs"></svg>
                            </div>
                            
                        </div>

                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                教育经历-专业
                            </div>
                            <div class="panel-body">
                                <svg width="350" height="350" id="word_cloud_education_dept" class="svgs"></svg>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                教育经历-学历
                            </div>
                            <div class="panel-body">
                                <svg width="350" height="350" id="word_cloud_education_deg" class="svgs"></svg>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                高管职业经历-职位
                            </div>
                            <div class="panel-body">
                                <svg width="350" height="350" id="word_cloud_basic_posn" class="svgs"></svg>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                任教经历-学校
                            </div>
                            <div class="panel-body">
                                <svg width="350" height="350" id="word_cloud_institute_univ" class="svgs"></svg>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                任教经历-职位、部门
                            </div>
                            <div class="panel-body">
                                <svg width="350" height="350" id="word_cloud_institute_dept" class="svgs"></svg>
                            </div>
                        </div>
                    </div>
                </div>


    <script>
        const draw_cloud = function(svg, data){
            console.log(svg)
            const width = svg.attr('width');
            const height = svg.attr('height');
            console.log(width)
            console.log(height)
            const margin = {top: 0, right: 0, bottom: 0, left: 0};
            const innerWidth = width - margin.left - margin.right;
            const innerHeight = height - margin.top - margin.bottom;
            const mainGroup = svg.append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
            var fill = d3.schemeCategory10;
            console.log(fill);
            // const fill = d3.scaleOrdinal(d3.schemeCategory20);
    
            
            console.log(data)
            var layout = d3.layout.cloud()
                .size([350, 350])
                .words(data.map(function(d) {
                return {text: d.text, size: d.size * 4, test: "haha"};
                }))
                .padding(2)
                .rotate(function() { return ~~(Math.random() * 180) - 90; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .on("end", draw);
    
            layout.start();
    
            function draw(words) {
                mainGroup.append('g')
                    .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
                    .selectAll("text")
                    .data(words)
                    .enter().append("text")
                    .style("font-size", function(d) { return d.size + "px"; })
                    .style("font-family", "Impact")
                    .style("fill", function(d, i) { return fill[i%10]; })
                    .attr("text-anchor", "middle")
                    .attr("transform", function(d) {
                        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                    })
                    .text(function(d) { return d.text; });
            }
        }
        d3.json("sample-data/wordcloud_data.json").then(function(data) {
            // Code to process the JSON data
            console.log(data); // Output the data to the console for demonstration
            draw_cloud(d3.select('#word_cloud_education_univ'), data['education_univ'])
            draw_cloud(d3.select('#word_cloud_education_dept'), data['education_dept'])
            draw_cloud(d3.select('#word_cloud_education_deg'), data['education_deg'])
            draw_cloud(d3.select('#word_cloud_basic_posn'), data['basic_posn'])
            draw_cloud(d3.select('#word_cloud_institute_univ'), data['institute_univ'])
            draw_cloud(d3.select('#word_cloud_institute_dept'), data['institute_dept'])
            
          }).catch(function(error) {
            // Handle any error that occurred while loading the JSON
            console.error(error);
          });
        //data1 = [{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7}]
        //draw_cloud(d3.select('#word_cloud'), data1)
      </script>

                      <!-- /. ROW  -->
            </div>
            <!-- /. PAGE INNER  -->
        </div>
        <!-- /. PAGE WRAPPER  -->
    </div>
    <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
	 
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- Morris Chart Js -->
    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="assets/js/morris/morris.js"></script>
	
	
	<script src="assets/js/easypiechart.js"></script>
	<script src="assets/js/easypiechart-data.js"></script>
	
	
    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>


</body>

</html>